<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<!-- 步骤: 
			1. 准备数据: 学生数组
			2. 使用v-for 显示
			3. 添加功能
			4. 删除功能
		-->
		<div id="app">
			<table border="1">
				<thead>
					<th>学号</th>
					<th>姓名</th>
					<th>年龄</th>
					<th>操作</th>
				</thead>
				<tbody>
					<tr v-for="(stu,i) in stus" :key="stu.id">
						<td>{{stu.id}}</td>
						<td>{{stu.name}}</td>
						<td>{{stu.age}}</td>
						<td><button type="button" @click="del(i)">删除</button></td>
					</tr>
					<tr>
						<td><input type="text" v-model="id" /></td>
						<td><input type="text" v-model="name" /></td>
						<td><input type="text" v-model="age" /></td>
						<td><input type="button" value="添加"  @click="add"/></td>
					</tr>
				</tbody>
			</table>
		</div>

		<script>
			const vm = Vue.createApp({
				data() {
					return {
						stus:[
							{
								id:1001,
								name:"张三",
								age:18
							},
							{
								id:1002,
								name:"李四",
								age:19
							},
							{
								id:1003,
								name:"王五",
								age:18
							}
						],
						id:"",
						name:"",
						age:"",
					}
				},
				methods:{
					add()
					{
						var stu = {
							id:parseInt(this.id),
							name:this.name,
							age:parseInt(this.age)
						}
						this.stus.push(stu);
						this.id = "";
						this.name = "";
						this.age = "";
					},
					del(i)
					{
						// 删除数组中指定位置的内容
						// splice(a,b)  // a 起始位置  b 删除数量
						this.stus.splice(i,1);
					}
				}
			})
			vm.mount("#app");
		</script>
	</body>
</html>
